<template>
    <div>
      <!--<div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-setting"></i> 配置管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{$route.meta.displayName}}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>-->
      <el-row :gutter="10" type="flex" class="row-bg" justify="space-between">
          <el-col>
            <div class="grid-content bg-purple">
              <el-input placeholder="请输入内容"   icon="search" v-model="roleSearch" :on-icon-click="handleSearchClick">>
                <el-select v-model="search_select" slot="prepend" clearable  placeholder="请选择">
                  <el-option label="名称" value="sysmapName"></el-option>
                </el-select>
              </el-input>
            </div>
          </el-col>
          <el-col>
            <el-button-group>
              <el-button type="primary" @click="handleAddTopoClick" icon="plus">{{$t('new topo')}}</el-button>
              <el-button type="primary" @click="handleDeleteSelectedTopoClick" icon="delete">{{$t('delete topo')}}</el-button>
            </el-button-group>
          </el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-table
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                :data="sysmapData"
                border>
                <el-table-column
                  type="selection">
                </el-table-column>
                <el-table-column
                  @resizable ="resizable"
                  prop="sysmapid"
                  label="编号"
                  min-width="25">
                </el-table-column>
                <el-table-column
                  @resizable ="resizable"
                  prop="name"
                  label="名称"
                  min-width="60">
                </el-table-column>
                <el-table-column
                  @resizable ="resizable"
                  prop="busType"
                  label="类型"
                  min-width="30">
                </el-table-column>
                <el-table-column
                  resizable
                  label="操作">
                  <template scope="scope">
                    <el-button @click="handleOpenTopoClick(scope.$index,scope.row)" type="text" icon="share" size="small">打开</el-button>
                    <el-button @click="handleModifyTopoClick(scope.$index,scope.row)" type="text" icon="edit" size="small">编辑</el-button>
                    <el-button @click="handleDelTopoClick(scope.$index,scope.row)" type="text" icon="delete" size="small"> 删除</el-button>
                  </template>
                </el-table-column>
                </el-table>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="end">
          <el-col :span="12">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="pageSizes"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total">
            </el-pagination>
        </el-col>
      </el-row>

      <el-dialog :title="dialogTitle" :close="handleDialogCloseClick"  v-model="dialogRoleDataVisible" class="demo-box demo-ruleForm">
          <el-row type="flex" justify="center">
              <el-col :span="24">
                <el-form :model="singleRoleDataForm" :rules="roleDataValidRules"  ref ="singleRoleDataForm">
                  <el-form-item prop="sysmapid" label-position="right" label="编号:" :label-width="formLabelWidth"  >
                    <el-input v-model="singleRoleDataForm.sysmapid" auto-complete="off" disabled></el-input>
                  </el-form-item>
                  <el-form-item prop="name" label-position="right" label="名称:" :label-width="formLabelWidth"  >
                    <el-input v-model="singleRoleDataForm.name" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item prop="busType" label-position="right" label="类型:" :label-width="formLabelWidth">
                      <el-select v-model="singleRoleDataForm.busType" size="small" style="position: absolute;">
                        <el-option label="默认" value="0"></el-option>
                        <el-option label="业务拓扑" value="1"></el-option>
                    </el-select>
                    <!--<el-input v-model="singleRoleDataForm.busType" auto-complete="off"></el-input>-->
                  </el-form-item>
                </el-form>

              </el-col>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancleSubmitForm('singleRoleDataForm')">取 消</el-button>
            <el-button type="primary" @click="handleModifyRoleDataActionForm('singleRoleDataForm')">修改</el-button>
          </div>
      </el-dialog>

      <!-- 弹出对话框  -->
      <div id="top-config-dialog" style="display:none">
        <component :is="currentViewComp" transition="fade" transition-mode="out-in" keep-alive
          @transferNewSysmap="transferNewSysmap" @transferCloseDialog="transferCloseDialog"></component>
      </div>
    </div>
</template>

<script>
  import topoApi from 'api/topo';
  import topoCreateComp from 'views/topo/topoCreate.vue'
  import art from 'utils/artdialog'
  import eventHubs from 'common/eventHubs'
  export default {
    components: {
      topoCreateComp
    },
    data :function(){
      return {
        currentViewComp: null,
        topoConfigAddDialog: null,
        //table
        sysmapData:[],
        currentPage:1,
        pageSizes:[10,20,50,100],
        pageSize:10,
        total:0,
        dialogRoleDataVisible:false,
        //搜索
        roleSearch:'',
        //搜索下拉选择
        search_select:'',

        formLabelWidth:'30%',

        dialogTitle:'新增角色',
        singleRoleDataForm:{
            sysmapid:'',
            name:'',
            busType:''
        },
        roleDataValidRules:{
          name:[{
              required: true,
              message: '拓扑图名称不能为空',
              trigger: 'blur'
          }],
          sysmapid:[{
              required: true,
              message: '拓扑图编号不能为空',
              trigger: 'blur'
          }]
        },
        //功能菜单权限
        dialogMenuAuthorityVisible:false,
        menuAuthorityProps:{
          children:'children',
          label:'name'
        },
        menuAuthorityData:[], //所点击分配菜单权限的 角色的所拥有的菜单
        allAuthorities:[],//所有的功能权限菜单
        // userClickChecked:false ,//用户点击的 Checked
        authorityIds:[],//
        existAuthorities:[],//当前role 已经存在的菜单权限
        singleSelectRow:[], //当前 选择行
        //分配额用户
        dialogSignUserToRoleVisible:false,
        userData:[],
        availableUser:[],
        userDataPagination:{
          currentPage:1,
          pageSizes:[10,20],
          pageSize:10,
          total:0,
        },
        //可分配用户table 的Pagination
        availableUserPagination:{
          currentPage:1,
          pageSizes:[10,20],
          pageSize:10,
          total:0,
        },
        selectedTopoData: []
      };

    },
    methods:{
      handleDialogCloseClick(){
        // this.userClickChecked = false ;
        this.dialogRoleDataVisible =false;
        this.singleRoleDataForm = {
            sysmapid:'',
            name:'',
            busType:''
        };
        this.authorityIds = [];
        this.menuAuthorityData = [];
        this.existAuthorities= [];
        this.singleSelectRow = [];
      },
      handleCancleSubmitForm(formName){
          this.dialogRoleDataVisible =false;
          this.$message({
            message:"操作取消",
            type:"info"
          });
          this.singleRoleDataForm = {
            sysmapid:'',
            name:'',
            busType:''
        };
      },
      //修改角色信息的dialogform按钮事件
      handleModifyRoleDataActionForm(formName){
          this.roleDataAction(formName,'modify');
      },
      roleDataAction(formName,action=null,dialogModeName="dialogRoleDataVisible"){
        var self = this;
        this.$refs[formName].validate( (valid)=>{
            if (valid) {
                //保存数据
                var params = self.singleRoleDataForm;
                var msg ="添加成功";
                if (action !=null){
                    params.sysmapid = self.singleRoleDataForm.sysmapid;
                    params.busType = self.singleRoleDataForm.busType;
                    // params.busType = self.getBusTypeByName(self.singleRoleDataForm.busType);
                    msg = "修改拓扑图成功"
                }
                topoApi.updateSysmapBaseInfo(params).then((response)=>{

                    if (response.data.errorCode == null){
                      self.$message({
                          message: msg,
                          type: "success"
                      });
                      //重置表单
                      self[formName]={
                          sysmapid:'',
                          name:'',
                          busType:''
                      };
                      //刷新 用户列表
                      self[dialogModeName] = false;
                      self.pageQueryTopoData();
                    }

                }).catch(err=>{
                    self.$message({
                        message: "操作失败",
                        type: "error"
                    });
                });
            }else{
              return false ;
            }
        });

      },

      //修改 角色信息按钮 点击事件
      handleModifyTopoClick(index,row){
          this.dialogTitle = "修改";
          this.dialogRoleDataVisible = true;
          let {sysmapid ,name ,busType  } = row ;
          this.singleRoleDataForm = {sysmapid ,name ,busType} ;
      },

      handleOpenTopoClick(index, row) {
        let {sysmapid ,name ,busType  } = row ;
        busType = this.getBusTypeByName(busType);
        let routerStr = '';
        if (busType == 0) {
          routerStr = '/topo/topoMgm';
        } else if (busType == 1) {
          routerStr = '/bus/topo';
        }
        if (routerStr != '') {
          this.$router.push({path:routerStr, query: {sysmapid: sysmapid}});

          eventHubs.getEventHub().$emit("sysmapidChange", sysmapid);
          this.$store.dispatch('setCurSysmapid', sysmapid);
          eventHubs.getEventHub().$emit("collapsedChange", true);
          this.$store.dispatch('changeCollapse', true);
        }

      },

      handleDelTopoClick(index,row){
        const self = this;
        self.$confirm(self.$t('Are you sure delete?', [row.name]), self.$t('Prompt'), {
          type: 'warning'
        }).then(() => {
          topoApi.deleteSysmap(row.sysmapid).then( response => {
             self.$message({
                type: 'success',
                message: self.$t('Deleted Successfully')
             });
             self.pageQueryTopoData();
          }).catch(error => {
            self.$message({
              type: 'error',
              message: self.$t('Failed to delete')
            });
          });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: self.$t('Cancel to delete')
          });
        });
      },

      handleDeleteSelectedTopoClick() {
        const self = this;
        if (this.selectedTopoData.length == 0) {
          this.$message({type:'warning', message: this.$t('Please select')});
          return;
        }
        let sysmapids = [];
        $.each(this.selectedTopoData, function() {
          sysmapids.push(this.sysmapid);
        });
        topoApi.deleteSysmaps(sysmapids).then( response => {
          if (response.data != null && response.status == 200) {
            self.$message({
                type: 'success',
                message: self.$t('Deleted Successfully')
             });
             self.pageQueryTopoData();
          } else {
            self.$message({
              type: 'error',
              message: self.$t('Failed to delete')
            });
          }
        }).catch( err => {
          self.$message({
              type: 'error',
              message: self.$t('Failed to delete')
            });
        });
      },

      handleSelectionChange(val) {
        this.selectedTopoData = val;
      },
      handleAddTopoClick() {
        this.currentViewComp = topoCreateComp;
        this.topoConfigAddDialog = art.artdialog(this.$t('new topo'), $('#top-config-dialog'), 300, 150, 'topoconfigadddialog');
      },
      closeDialog() {
        if (this.topoConfigAddDialog != null) {
          this.topoConfigAddDialog.close();
        }
      },
      transferCloseDialog(msg) {
        this.closeDialog();
        this.$message(msg);
      },
      transferNewSysmap(newSysmap) {
        if (this.topoConfigAddDialog != null) {
          this.topoConfigAddDialog.close();
        }
        this.pageQueryTopoData();
        this.$message(this.$t("Created Successfully"));
      },

      resizable() {
        return false;
      },
      //搜索handle
      handleSearchClick(ev){
        //模糊搜索
        this.$message({
          type:"info",
          message:"搜索"
        })

      },
      handleUserDataCurrentChange(val){

      },
      handleUserDataSizeChange(val){

      },
      handleAvailableUserCurrentChange(val){

      },
      handleAvailableUserSizeChange(val){

      },
      handleSizeChange(val){
        this.pageSize = val;
        this.pageQueryTopoData(this.currentPage,this.pageSize);
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.pageQueryTopoData(this.currentPage,this.pageSize);
      },
      pageQueryTopoData(pageIndex=1,pageSize=10){
        var self = this;
        topoApi.pageQuerySysmapBaseInfo(pageIndex, pageSize).then(response => {
            if (response.data.rows !=null ){
              self.sysmapData = response.data.rows ;
              $.each(self.sysmapData, function() {
                  this.busType = self.getBusTypeLabel(this.busType);
              });
              self.currentPage = response.data.pageIndex;
              self.pageSize = response.data.pageSize ;
              self.total = response.data.total;
            }
        }).catch(err =>{
            console.log(err);
        });
      },
      getBusTypeLabel(busType) {
          switch (busType) {
              case '1':
                return '业务拓扑';
              default:
                return '默认';
          }
      },
      getBusTypeByName(busTypeName) {
          switch (busTypeName) {
              case '业务拓扑':
                return '1';
              default:
                return '0';
          }
      }
    },
    mounted:function (){
      this.pageQueryTopoData();
    }
  }
</script>


<style scoped>
  .demo-box .el-select, .demo-box .el-input{
    width:60%;
    float: left;
  }
  .demo-box .el-switch{
    float: left;
  }
  .el-col .el-pagination{
    float: right;
  }
  .el-input .el-select{
    width: 110px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }

</style>
